<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>大前端的格斗技巧</title>
    <meta name="author" content="unclexiao">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="css/reveal.css">
    <link rel="stylesheet" href="css/theme/league.css">
    <link rel="stylesheet" href="css/uncle.css">
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"/>
</head>
<body>
<div class="reveal">
    <div class="slides">
        <section class="sec-1">
            <h2>大前端的格斗技巧</h2>
            <h6>学习使用那些牛掰的兵器</h6>
            <p>
                <small>Created by <a href="https://github.com/unclexiao">unclexiao</a></small>
            </p>
        </section>

        <section class="sec-2">
            <h3>兵器谱</h3>
            <ul>
                <li>模拟：别挡我路</li>
                <li class="br">埋点：谁来背锅</li>
                <li>图标：触手可及</li>
                <li class="br">材质化：柔情似水</li>
                <li class="br">工程化：与时代接轨</li>
                <li class="br">新技术：跨端、跨领域</li>
                <li>未来已来，只是尚未流行</li>
            </ul>
            <!--  前四个主题，帮助页面仔提高工作效率
              工程化主题，刷新你的认知，向大家介绍什么是现代化前端
              最后两个是我最想讲的，了解这些之后，会让你久久不能平复-->
        </section>

        <section class="sec-3">
            <section>
                <h3>革命</h3>
                <h5>回顾历史，不断被解决开发痛点</h5>
                <div>
                    <img src="img/revolution.jpg" alt="">
                </div>
            </section>
            <section>
                <ol>
                    <li>繁琐操作DOM：jQuery --> Template --> MVV*框架</li>
                    <li>重写css代码：Prefix --> LESS --> SASS</li>
                    <li class="br">管理js模块：IIFE --> RequireJS --> Webpack</li>
                    <li class="fragment highlight-blue">但是，为什么接口联调带来的痛苦，一直没人管？</li>
                </ol>
            </section>
            <section>
                <h5>查文档，造数据</h5>
                <h5 class="fragment">望眼欲穿，苦不堪言</h5>
                <div class="sec-3-3">
                    <img src="img/jira.png" alt="">
                    <img src="img/wiki.png" alt="">
                </div>
                <!--比如近期银行卡安全险小程序，后端没有实现，于是卡壳了。。。但是只能这样了吗？-->
            </section>
            <section>
                <h2>救世主：EasyMock</h2>
                <h5><a href="https://easy-mock.com/" target="_blank">我要的，现在就要！</a></h5>
            </section>
            <section>
                <h3>特性</h3>
                <ul>
                    <li>Class Model</li>
                    <li>Swagger Docs</li>
                    <li>Restful API</li>
                    <li>JSONP Request</li>
                    <li>接口代理</li>
                    <li>协同编辑</li>
                </ul>
                <h5 class="fragment gray">Swagger:吹牛，虚张声势吓人，趾高气扬地行走或行事</h5>
                <!-- 据悉，PHP、Node、JAVA都可实现Swagger文档，比如Spring框架，你会看到熟悉的注解-->
            </section>
        </section>

        <section class="sec-4">
            <section>
                <h5>取数据爽歪歪了，那么存数据呢？</h5>
                <div>
                    <img src="img/data.png" alt="">
                </div>
            </section>
            <section>
                <ol>
                    <li class="br">移动端抛错</li>
                    <li class="br">线上问题追踪</li>
                    <li class="br">做点别的坏事</li>
                </ol>
            </section>
            <section>
                <h2>为开发加速：LeanCloud</h2>
                <h5><a href="https://leancloud.cn/" target="_blank">强有力的后盾！</a></h5>
            </section>
            <section>
                <h3>特性</h3>
                <ul>
                    <li>云存储</li>
                    <li>SQL查询</li>
                    <li>Restful API</li>
                    <li>数据分析</li>
                    <li>协同编辑</li>
                    <li class="gray">消息推送</li>
                    <li class="gray">即时通讯</li>
                </ul>
                <br><br>
                <h5 class="fragment gray">唯一的遗憾：单表</h5>
                <!-- 所以建立索引，外键，联合查询，事务与触发器，就心有余而力不足了。。。但是没关系，我们有芒果，后面会提到-->
            </section>
        </section>

        <section>
            <section>
                <h3>跪求一份设计稿</h3>
                <ul>
                    <li>等着设计师开饭</li>
                    <li>适配与兼容性问题</li>
                    <li>需求变更或功能扩展</li>
                </ul>
            </section>
            <section>
                <h3>图标：触手可及</h3>
                <img src="img/iconfont.png" alt="">
                <h5><a href="http://www.iconfont.cn/" target="_blank">阿里巴巴矢量图标库</a></h5>
            </section>
            <section>
                <h3>特性</h3>
                <ul>
                    <li>极简的美感</li>
                    <li>超强的兼容性</li>
                    <li>可随意上传与修改</li>
                    <li>轻轻松松团队协作</li>
                </ul>
            </section>
        </section>

        <section>
            <section>
                <h3>最舒服的交互方式</h3>
                <iframe width="560" height="315" src="https://www.youtube.com/embed/Q8TXgCzxEnw" frameborder="0"
                        allowfullscreen></iframe>
                <!--<h4><a href="https://www.youtube.com/watch?v=Q8TXgCzxEnw">Material design</a></h4>-->
            </section>
            <section>
                <h5>理念</h5>
                <ul>
                    <li>Material is the metaphor</li>
                    <li>Bold,graphic,intentional</li>
                    <li>Motion provides meaning</li>
                </ul>
            </section>
            <section>
                <h5>实现</h5>
                <ul>
                    <li class="p">
                        <p class="p"><a href="https://material.io/">官网</a></p>
                    </li>
                    <li class="p">
                        <p class="p"><a href="http://design.1sters.com/#">中文</a></p>
                    </li>
                    <li class="p">
                        <p class="p"><a href="https://www.muicss.com/">Angular版</a></p>
                    </li>
                    <li class="p">
                        <p class="p"><a href="https://vuematerial.github.io/#/">VueJS版</a></p>
                    </li>
                    <li class="p">
                        <p class="p"><a href="http://www.material-ui.com/#/">React版</a></p>
                    </li>
                </ul>
            </section>
            <section>
                <h5>特性</h5>
                <div>
                    <img src="img/hard.png" alt="">
                </div>
                <h5>真真是极好的</h5>
                <h5>但臣妾做不到</h5>
            </section>
        </section>

        <section>
            <section>
                <h3>工程化</h3>
                <blockquote>
                    我这里运行正常呀，是你打开的姿势不对吧？
                </blockquote>
                <br><br>
                <blockquote>
                    卧槽，这傻逼写的什么代码，糟糕透了！
                </blockquote>
            </section>
            <section>
                <div>
                    <img src="img/code_test.png" alt="">
                </div>
                <h5>测试用例（Unit + E2E）!</h5>
                <h5><a href="http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html" class="fragment">阮一峰的教程→</a>
                </h5>
            </section>

            <section>
                <div>
                    <img src="img/code_quality.png" alt="">
                </div>
                <h5>嗅到坏味道，改了再提交!</h5>
                <h5><a href="http://eslint.org/demo/">官网实例→</a></h5>
            </section>

            <section>
                <h3>Prepack</h3>
                <h5>
                    <a href="https://prepack.io/repl.html">A tool for making JavaScript code run
                        faster.</a>
                </h5>
            </section>
            <section>
                <h5>胖客户端？</h5>
                <div>
                    <img src="img/fat.jpg" alt="">
                </div>
                <h5>
                    <a href="https://github.com/davezuko/react-redux-starter-kit">react-redux-starter-kit</a>
                </h5>
            </section>
            <section>
                <h5>特性</h5>
                <div>
                    <img src="img/but.jpg" alt="">
                </div>
                <h5>怎么实现我不管</h5>
                <h5>反正明天上线</h5>
            </section>
        </section>

        <section>
            <h2>未来已来，只是尚未流行</h2>
        </section>

        <section>
            <section>
                <h4>未来一：微信生态</h4>
                <h5>无敌是多么寂寞</h5>
                <div class="sec-5-1">
                    <img src="img/invincible.jpg" alt="">
                </div>
            </section>

            <section>
                <h5>触手可及、用完即走的小程序</h5>
                <div>
                    <img src="img/AllenZhang.jpg" alt="">
                </div>
            </section>

            <section>
                <h5>喜出望外的开发者</h5>
                <ul>
                    <li>无需部署</li>
                    <li>数据绑定</li>
                    <li>完美的屏幕适配</li>
                    <li>丰富的组件（吐司、画廊、弹幕）</li>
                </ul>
            </section>

            <section>
                <h5>痛苦不堪的开发者</h5>
                <ul>
                    <li>不支持SVG</li>
                    <li>不支持外链</li>
                    <li>不支持过滤器</li>
                    <li>被阉割的模块化</li>
                </ul>
            </section>

            <section>
                <h5>解决方案</h5>
                <ul>
                    <li>字体图标：<a href="http://www.iconfont.cn/">IconFont</a></li>
                    <li>富文本解析器：<a href="https://github.com/icindy/wxParse">WxParse</a></li>
                    <li>组件化开发：<a href="https://github.com/wepyjs/wepy">Wepy</a></li>
                    <li class="fragment highlight-blue">傻傻地轮询：无力吐槽</li>
                </ul>
            </section>

            <section>
                <h3>对个人免费开放！</h3>
                <div>
                    <img src="img/slash.jpg" alt="">
                </div>
                <h5 class="fragment">Slash：猛砍，鞭打，严厉批评</h5>
                <h5 class="fragment"><a href="https://github.com/unclexiao/growth">斜杠人生：探索更多的可能性</a></h5>

            </section>
        </section>

        <section>
            <section>
                <h4>未来二：机器人</h4>
                <div>
                    <img src="img/AlphaGo.jpg" alt="">
                </div>
            </section>

            <section>
                <h4>智能客服</h4>
                <div>
                    <img src="img/robot.jpg" alt="">
                </div>
                <h5><a href="https://github.com/Chatie/wechaty">Wechat for Bot. Powered by WebDriver / Node.js /
                    TypeScript / Docker</a></h5>
                <!--查看社区的文章也是蛮有意思的，打点鸡血，学些新东西-->
            </section>

            <section>
                <h4>深度学习</h4>
                <div>
                    <img src="img/yourname.jpg" alt="">
                </div>
                <h5><a href="https://github.com/tensorflow/tensorflow">Computation using data flow graphs for scalable
                    machine learning</a></h5>
                <!--热点响应，是否可以下一次引爆病毒传播？-->
            </section>
        </section>

        <section>
            <section>
                <h4>未来三：跨端能力</h4>
                <div>
                    <img src="img/cross.jpg" alt="">
                </div>
            </section>

            <section>
                <h5>最流行的JavaScript能做些什么？</h5>
                <ul>
                    <li>PC Web</li>
                    <li>Mobile Web</li>
                    <li class="fragment highlight-current-blue">Backend(NodeJS+NoSQL)</li>
                    <li class="fragment highlight-current-blue">PC APP(MAC+Win+Linux)</li>
                    <li class="fragment highlight-current-blue">Mobile APP(iOS+Android+WP)</li>
                    <li class="fragment highlight-current-blue">Progressive Web Apps</li>
                    <li class="fragment highlight-current-blue">Virtual Reality</li>
                    <li class="fragment highlight-current-blue">Internet of Things</li>
                    <li class="fragment highlight-current-blue">Web Assembly</li>
                </ul>
                <!--你达到高潮了吗？！-->
            </section>

            <section>
                <h3>Backend</h3>
                <div>
                    <img style="height: 250px;margin-right: 50px;" src="img/MEAN.jpg" alt="">
                    <img style="height: 250px;" src="img/LAMP.png" alt="">
                </div>
                <h5>MEAN VS LAMP</h5>
            </section>

            <section>
                <h3>PC APP</h3>
                <ul>
                    <li>Web Technologies</li>
                    <li>Cross Platform</li>
                    <li>Open Source</li>
                </ul>
                <div>
                    <img src="img/atom.gif" alt="">
                </div>
                <h5><a href="https://electron.atom.io/">Build cross platform desktop apps with JavaScript, HTML, and
                    CSS</a></h5>
            </section>

            <section>
                <h3>Mobile APP</h3>
                <ul>
                    <li>Facebook</li>
                    <li>Instagram</li>
                    <li>Airbnb</li>
                    <li>Tesla</li>
                    <li>Tencent QQ</li>
                    <li>Baidu Mobile</li>
                </ul>
                <br><br>
                <h5><a href="https://facebook.github.io/react-native/showcase.html">Learn once, write anywhere: Build
                    mobile apps with React</a></h5>
            </section>

            <section>
                <h3>Progressive Web Apps</h3>
                <ul>
                    <li>Forbes</li>
                    <li>Twitter</li>
                    <li>Elem</li>
                </ul>
                <br><br>
                <h5><a href="https://developers.google.com/web/progressive-web-apps/">A new way to deliver amazing user
                    experiences on the web (27).</a></h5>
            </section>

            <section>
                <h3>Virtual Reality</h3>
                <iframe width="560" height="315" src="https://www.youtube.com/embed/SCrkZOx5Q1M" frameborder="0"
                        allowfullscreen></iframe>
                <!--<h4><a href="https://www.youtube.com/watch?v=SCrkZOx5Q1M">Google Earth VR</a></h4>-->
                <br><br>
                <h5><a href="https://facebook.github.io/react-vr/">Build VR websites and interactive 360 experiences
                    with React</a></h5>
            </section>

            <section>
                <h3>Internet of Things</h3>
                <div>
                    <img style="width: 400px;" src="img/hardware.jpg" alt="">
                </div>
            </section>

            <section>
                <h3>Web Assembly</h3>
                <div>
                    <img src="img/Web-Assembly.jpg" alt="">
                </div>
                <h5><a href="http://webassembly.org/demo/Tanks/">Tank war</a></h5>
            </section>
        </section>

        <section>
            <section>
                <h3>汝乃天骄，何不扶搖上九霄</h3>
                <div>
                    <img style="width: 400px;" src="img/meeting.jpg" alt="">
                </div>
                <h5>JustJavaC、Phodal、i5Ting、Hax、芋头、小胡子哥……</h5>
                <!--这些人成为了技术大V，一定有过人之处。他们的观点不一定正确，但他们的眼界肯定是值得学习的-->
            </section>
            <section>
                <h3>Team</h3>
                <blockquote>
                    应用开发部：开放，创新，执行力
                </blockquote>
            </section>
            <section>
                <h5>向终身学习者致敬</h5>
                <div>
                    <img style="width: 400px;" src="img/team.jpg" alt="">
                </div>
                <!--我们怀着共同的目标，每一个人都参与进来，才能实现更高的价值-->
                <h3>等待你们的加入！</h3>
            </section>
        </section>

        <section class="sec-11">
            <h2>谢谢诸位</h2>
            <div class="sec-3-3">
                <img src="img/wechat.jpg" alt="">
            </div>
            <h5>用最有意思的方式提高认知，根本停不下来</h5>
            <h5><a href="https://zhuanlan.zhihu.com/funnycode">@趣你的肖蜀黍</a></h5>
        </section>

    </div>
</div>

<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script src="node_modules/socket.io-client/dist/socket.io.js"></script>
<script>
    Reveal.initialize({
        controls: true,
        progress: true,
        history: true,
        center: true,
        transition: 'zoom',
        dependencies: [
            {
                src: 'lib/js/classList.js',
                condition: function () {
                    return !document.body.classList;
                }
            },
            {
                src: 'plugin/zoom-js/zoom.js',
                async: true
            }
        ]
    });

  /*  var socket = io('http://localhost:9192');

    socket.on('control', function (data) {
        switch (data) {
            case 'Up':
                Reveal.up();
                break;
            case 'Down':
                Reveal.down();
                break;
            case 'Left':
                Reveal.left();
                break;
            case 'Right':
                Reveal.right();
                break;
            case 'Space':
                Reveal.next();
                break;
        }
    });*/

</script>


</body>
</html>
